<template>
    <div>
        <el-button @click="router.push('/order/add')">新增</el-button>
        <el-table :data="tableData">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="user_id" label="用户ID" />
            <el-table-column prop="order_number" label="订单号" />
            <el-table-column prop="total_amount" label="总金额" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="create_time" label="创建时间" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="edit(row.id)">编辑</el-button>
                    <el-button @click="del(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :small="true"
            :disabled="loading"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="fetchData"
            @current-change="fetchData"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const tableData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const fetchData = async () => {
    loading.value = true
    const res = await http.get('/order/list', {
        params: {
            page: currentPage.value,
            limit: pageSize.value
        }
    })
    tableData.value = res.data.items
    total.value = res.data.total
    loading.value = false
}

const edit = (id) => {
    router.push(`/order/edit/${id}`)
}

const del = (id) => {
    ElMessage.confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            await http.delete(`/order/${id}`)
            ElMessage.success('删除成功')
            fetchData()
        })
        .catch(() => {})
}

fetchData()
</script>

<style scoped>
</style>
